﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - General Slicer Data</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
        /*css_begin*/
        .noUi-origin {
            right: auto;
            width: 0;
        }

        .connect {
            position: absolute;
            top: 0;
            bottom: 0;
            background: #80C9F5;
            box-shadow: inset 0 0 3px rgba(51,51,51,0.45);
        }

        .noUi-state-tap .connect {
            -webkit-transition: left 300ms, right 300ms;
            transition: left 300ms, right 300ms;
        }
        /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            var columnNames = ["Name", "Class", "Gender", "Math", "English", "Total Score"];
            var datas = [["Student1", 1, "female", "69", "66", "135"],
                     ["Student2", 1, "female", "99", "85", "184"],
                     ["Student3", 1, "male", "78", "77", "155"],
                     ["Student4", 1, "male", "54", "80", "134"],
                     ["Student7", 2, "male", "87", "98", "185"],
                     ["Student8", 2, "male", "78", "85", "163"],
                     ["Student9", 2, "female", "100", "90", "190"],
                     ["Student10", 2, "female", "68", "54", "122"],
                     ["Student11", 2, "female", "97", "100", "197"],
                     ["Student12", 2, "female", "81", "90", "171"],
                     ["Student15", 2, "female", "90", "68", "158"],
                     ["Student16", 3, "male", "86", "70", "156"],
                     ["Student17", 3, "male", "88", "89", "177"],
                     ["Student18", 3, "male", "54", "80", "134"],
                     ["Student19", 3, "male", "81", "75", "156"],
                     ["Student23", 3, "female", "78", "98", "176"],
                     ["Student24", 3, "female", "90", "98", "188"],
                     ["Student25", 3, "male", "60", "30", "90"],
                     ["Student26", 3, "female", "0", "0", "0"],
                     ["Student27", 3, "female", "100", "100", "200"],
                     ["Student28", 3, "male", "89", "78", "167"]
            ];
            init(datas, columnNames);

            // create GeneralSlicerData
            var dataSource = new GcSpread.Slicer.GeneralSlicerData(datas, columnNames);

            // attach slicer to GeneralSlicerData.
            var genderSlicer = new StudentSlicer($("#slicer_Gender")[0]);
            genderSlicer.setData(dataSource, "Gender");
            var classSlicer = new StudentSlicer($("#slicer_Class")[0]);
            classSlicer.setData(dataSource, "Class");

            var mathSlicer = new ScoreSlicer($("#slicer_Math")[0]);
            mathSlicer.setData(dataSource, "Math");
            var enSlicer = new ScoreSlicer($("#slicer_Englise")[0]);
            enSlicer.setData(dataSource, "English");
            var totalSlicer = new ScoreSlicer($("#slicer_Total")[0]);
            totalSlicer.setData(dataSource, "Total Score");
        });

        // add data source
        function init(datas, columnNames) {
            var tableStr = "<table border='1' cellpadding='0' cellspacing='0'><tr>";
            for (var i = 0; i < columnNames.length; i++) {
                tableStr += "<th>" + columnNames[i] + "</th>";
            }
            tableStr += "</tr>";
            for (var i = 0; i < datas.length; i++) {
                tableStr += "<tr>";
                for (var j = 0; j < datas[i].length; j++) {
                    tableStr += "<td>" + datas[i][j] + "</td>";
                }
                tableStr += "</tr>";
            }
            tableStr += "</table>";
            var $listTable = $(tableStr);
            $("#ss").append($listTable);            
        }

        // create custom slicer
        function StudentSlicer(container) {
            this.container = container;
        }
        StudentSlicer.prototype = new GcSpread.Slicer.SlicerBase();
        StudentSlicer.prototype.constructor = StudentSlicer;        
        StudentSlicer.prototype.onDataLoaded = function () {
            var self = this;
            $(self.container).append($("<span>" + self.columnName + ":</span>"));
            // get column data and build slicer UI.
            var datas = self.exclusiveDatas, domString = "";
            for (var i = 0; i < datas.length; i++) {
                domString += '<input type="checkbox" name="' + self.columnName + '" value="' + datas[i] + '" >' + '<span>' + datas[i] + '</span>';
            }
            $(self.container).append($(domString));
            $("[name='" + self.columnName + "']").change(function () {
                var slicer = self,
                    exclusiveData = slicer.slicerData.getExclusiveData(slicer.columnName),
                    parent = $(this).parent(),
                    children = parent.children(),
                    indexes = [];
                for (var i = 0, length = children.length; i < length; i++) {
                    if (children[i].checked) {
                        var value = children[i].value;
                        if (!isNaN(parseInt(value))) {
                            value = parseInt(value);
                        }
                        indexes.push(exclusiveData.indexOf(value));
                    }
                }
                // respond UI event and invoke doFilter function and doUnfilter function.
                if (indexes.length === 0) {
                    slicer.slicerData.doUnfilter(slicer.columnName);
                } else {
                    slicer.slicerData.doFilter(slicer.columnName, { exclusiveRowIndexes: indexes });
                }
            });
        };
        // get the filtered result and update slicer UI.
        StudentSlicer.prototype.onFiltered = function () {
            var slicerdata = this.slicerData;
            var filteredRowIndexs = slicerdata.getFilteredRowIndexes();
            var trs = $("#ss").find("tr");
            for (var i = 0; i < slicerdata.data.length; i++) {
                if (filteredRowIndexs.indexOf(i) !== -1) {
                    $(trs[i + 1]).show();
                } else {
                    $(trs[i + 1]).hide();
                }
            }
        };

        function ScoreSlicer(container) {
            this.container = container;
        }
        ScoreSlicer.prototype = new GcSpread.Slicer.SlicerBase();
        ScoreSlicer.prototype.constructor = StudentSlicer;
        ScoreSlicer.prototype.onDataLoaded = function () {
            var self = this;
            var connectSlider = $("<div style='width:150px; margin-top: 16px; margin-left: 10px;'></div>")[0];
            var max = 100;
            if (self.columnName === "Total Score") {
                max = 200;
            }
            noUiSlider.create(connectSlider, {
                start: [0, 200],
                connect: false,
                range: {
                    'min': 0,
                    'max': max
                }
            });
            var connectBar = document.createElement('div'),
                connectBase = connectSlider.getElementsByClassName('noUi-base')[0];

            // Give the bar a class for styling and add it to the slider.
            connectBar.className += 'connect';
            connectBase.appendChild(connectBar);
            $(self.container).append($("<span>" + self.columnName + ":</span>"));
            var $textSpan = $("<span></span>");
            $(self.container).append($textSpan);
            $(self.container).append(connectSlider);
            var connectHandles = connectSlider.getElementsByClassName('noUi-origin');

            connectSlider.noUiSlider.on('update', function (values, handle) {
                // Pick left for the first handle, right for the second.
                var side = handle ? 'right' : 'left',
                // Get the handle position and trim the '%' sign.
                    offset = (connectHandles[handle].style.left).slice(0, -1);
                // Right offset is 100% - left offset
                if (handle === 1) {
                    offset = 100 - offset;
                }
                connectBar.style[side] = offset + '%';
                var min = parseInt(values[0]), max = parseInt(values[1]);
                $textSpan.text(min + "-" + max);
                var slicer = self, exclusiveData = self.slicerData.getExclusiveData(slicer.columnName), indexes = [];

                for (var i = 0, length = exclusiveData.length; i < length; i++) {
                    if (exclusiveData[i] >= min && exclusiveData[i] <= max) {
                        indexes.push(i)
                    }
                }
                slicer.slicerData.doFilter(slicer.columnName, { exclusiveRowIndexes: indexes })
            });
        };
        ScoreSlicer.prototype.onFiltered = function () {
            var slicerdata = this.slicerData;
            var filteredRowIndexs = slicerdata.getFilteredRowIndexes();
            var trs = $("#ss").find("tr");
            for (var i = 0; i < slicerdata.data.length; i++) {
                if (filteredRowIndexs.indexOf(i) !== -1) {
                    $(trs[i + 1]).show();
                } else {
                    $(trs[i + 1]).hide();
                }
            }
        };
        /*code_end*/
    </script>

</head>
<body>
    <div class="sample-turtorial">
        <div style="float: left;">
            <div id="slicer_Gender" style=" height:50px;"></div>
            <div id="slicer_Class" style="margin-top: 10px; height:50px;"></div>
            <div id="slicer_Math" style="margin-top: 10px; height:100px;"></div>
            <div id="slicer_Englise" style="margin-top: 10px; height:100px;"></div>
            <div id="slicer_Total" style="margin-top: 10px; height:100px;"></div>
        </div>
        <div id="ss" style="margin-left: 185px;"></div>
    </div>
</body>
</html>
